<template>
  <el-dialog
    :title="dataForm.id ? '修改' : '新增'"
    :close-on-click-modal="true"
    v-model="visible"
    width="85%"
    destroy-on-close
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRule"
      label-width="120px"
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="杯赛名称" prop="tenantName">
            <el-input v-model="dataForm.tenantName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联赛编码" prop="leagueCode">
            <el-input v-model="dataForm.leagueCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边队伍" prop="leftTeamId">
            <el-select
              v-model="dataForm.leftTeamId"
              filterable
              placeholder="左边队伍"
              clearable
              :style="{ width: '100%' }"
              @change="changeTeam($event, 'left')"
            >
              <el-option
                v-for="item in teamList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边队伍" prop="rightTeamId">
            <el-select
              v-model="dataForm.rightTeamId"
              filterable
              placeholder="右边队伍"
              clearable
              :style="{ width: '100%' }"
              @change="changeTeam($event, 'right')"
            >
              <el-option
                v-for="item in teamList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边队伍LOGO" prop="leftTeamLogo">
            <img
              :src="dataForm.leftTeamLogo"
              width="63"
              height="91"
              v-if="dataForm.leftTeamLogo"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边队伍LOGO" prop="rightTeamLogo">
            <img
              :src="dataForm.rightTeamLogo"
              width="63"
              height="91"
              v-if="dataForm.rightTeamLogo"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边队伍得分" prop="leftTeamScore">
            <el-input-number
              type="number"
              :min="0"
              :style="{ width: '100%' }"
              v-model="dataForm.leftTeamScore"
              placeholder="左边队伍得分"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边队伍得分" prop="rightTeamScore">
            <el-input-number
              v-model="dataForm.rightTeamScore"
              placeholder="右边队伍得分"
              :style="{ width: '100%' }"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
                      <el-form-item label="左边小局计分" prop="leftTeamPoints">
                          <el-input-number
                              type="number"
                              :min="0"
                              :style="{width: '100%'}"
                              v-model="dataForm.leftTeamPoints"
                              placeholder="左边小局计分">
                          </el-input-number>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="右边小局计分" prop="rightTeamPoints">
                          <el-input-number
                              v-model="dataForm.rightTeamPoints"
                              placeholder="右边小局计分"
                              :style="{width: '100%'}"
                              :min="0"></el-input-number>
                      </el-form-item>
                  </el-col> -->
        <el-col :span="12">
          <el-form-item label="比赛状态" prop="matchStatus">
            <el-select
              v-model="dataForm.matchStatus"
              placeholder="比赛状态"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in matchStatusData"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="比赛类型" prop="matchTag">
            <el-select
              v-model="dataForm.matchTag"
              filterable
              placeholder="比赛类型"
              clearable
              :style="{ width: '100%' }"
              @change="changeMatchTag($event)"
            >
              <el-option
                v-for="item in matchTagData"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="比赛日期" prop="matchDate">
            <el-date-picker
              v-model="dataForm.matchDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="比赛时间" prop="matchTime">
            <el-input
              v-model="dataForm.matchTime"
              placeholder="比赛时间"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否发布" prop="enableFlag">
            <el-switch
              v-model="dataForm.enableFlag"
              :active-value="1"
              :inactive-value="0"
              :style="{ width: '100%' }"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否开启直播" prop="liveFlag">
            <el-switch
              v-model="dataForm.liveFlag"
              active-value="Y"
              inactive-value="N"
              :style="{ width: '100%' }"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="dataForm.liveFlag === 'Y'">
          <el-form-item label="直播链接地址" prop="matchLiveUrl">
            <el-input
              v-model="dataForm.matchLiveUrl"
              placeholder="直播链接地址"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="type === 'edit'">
          <el-form-item label="Rounds" prop="rounds">
            <el-select
              v-model="dataForm.rounds"
              filterable
              placeholder="Rounds"
              clearable
              :style="{ width: '100%' }"
              @change="changeRounds($event)"
            >
              <el-option
                v-for="item in roundsData"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <div v-if="type === 'edit'">
          <el-table :data="dataForm.matchInfoList" border style="width: 100%">
            <el-table-column
              prop="matchSort"
              label="序号"
              align="center"
              width="60"
            >
              <template #default="scope">
                第{{ scope.row.matchSort }}局
              </template>
            </el-table-column>
            <el-table-column
              prop="leftTeamType"
              label="左边队伍颜色"
              align="center"
              width="110"
            >
              <template #default="scope">
                <el-select
                  v-model="scope.row.leftTeamType"
                  filterable
                  placeholder="左边队伍颜色"
                  clearable
                  :style="{ width: '100%' }"
                  @change="
                    changeTeamColor($event, 'right', scope.row, scope.$index)
                  "
                >
                  <el-option
                    v-for="item in teamColorData"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="rightTeamType"
              label="右边队伍颜色"
              align="center"
              width="110"
            >
              <template #default="scope">
                <el-select
                  filterable
                  v-model="scope.row.rightTeamType"
                  placeholder="右边队伍颜色"
                  clearable
                  :style="{ width: '100%' }"
                  @change="
                    changeTeamColor($event, 'left', scope.row, scope.$index)
                  "
                >
                  <el-option
                    v-for="item in teamColorData"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="roundTwoLeftTeamScore" label="左边队伍小龙数" align="center" width="100">
                              <template #default="scope">
                                  <el-input type="number" :min="0" :style="{width: '100%'}" v-model="scope.row.roundTwoLeftTeamScore">
                                  </el-input>
                              </template>
                          </el-table-column>
                          <el-table-column prop="roundTwoRightTeamScore" label="右边队伍小龙数" align="center" width="100">
                              <template #default="scope">
                                  <el-input type="number" :min="0" :style="{width: '100%'}" v-model="scope.row.roundTwoRightTeamScore">
                                  </el-input>
                              </template>
                          </el-table-column> -->
            <el-table-column
              prop="roundOneLeftTeamScore"
              label="左边队伍击杀数"
              align="center"
              width="100"
            >
              <template #default="scope">
                <el-input
                  type="number"
                  :min="0"
                  :style="{ width: '100%' }"
                  v-model="scope.row.roundOneLeftTeamScore"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="roundOneRightTeamScore"
              label="右边队伍击杀数"
              align="center"
              width="100"
            >
              <template #default="scope">
                <el-input
                  type="number"
                  :min="0"
                  :style="{ width: '100%' }"
                  v-model="scope.row.roundOneRightTeamScore"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="matchKeepTime"
              label="比赛时长(min)"
              align="center"
            >
              <template #default="scope">
                <el-input
                  type="number"
                  :min="0"
                  :style="{ width: '100%' }"
                  v-model="scope.row.matchKeepTime"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="roundOneHgWinId"
              label="一血拿取队伍"
              align="center"
            >
              <template #default="scope">
                <el-select
                  v-model="scope.row.roundOneHgWinId"
                  filterable
                  placeholder="一血拿取队伍"
                  clearable
                  :style="{ width: '100%' }"
                  @change="changeTeamMap1($event, scope.row, scope.$index)"
                >
                  <el-option
                    v-for="item in matchTeamsList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <img
                  :src="scope.row.roundOneHgWinLogo"
                  width="63"
                  height="91"
                />
              </template>
            </el-table-column>

            <el-table-column prop="firstDragon" label="首龙" align="center">
              <template #default="scope">
                <el-select
                  v-model="scope.row.firstDragon"
                  filterable
                  placeholder="首龙"
                  clearable
                  :style="{ width: '100%' }"
                  @change="changeTeamMap5($event, scope.row, scope.$index)"
                >
                  <el-option
                    v-for="item in matchTeamsList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <img :src="scope.row.firstDragonLogo" width="63" height="91" />
              </template>
            </el-table-column>
            <el-table-column prop="firstFive" label="先五" align="center">
              <template #default="scope">
                <el-select
                  v-model="scope.row.firstFive"
                  filterable
                  placeholder="先五"
                  clearable
                  :style="{ width: '100%' }"
                  @change="
                    changeTeamMap3($event, scope.row, scope.$index, 'firstFive')
                  "
                >
                  <el-option
                    v-for="item in matchTeamsList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <img :src="scope.row.firstFiveLogo" width="63" height="91" />
              </template>
            </el-table-column>
            <el-table-column prop="firstTen" label="先十" align="center">
              <template #default="scope">
                <el-select
                  v-model="scope.row.firstTen"
                  filterable
                  placeholder="先十"
                  clearable
                  :style="{ width: '100%' }"
                  @change="changeTeamMap4($event, scope.row, scope.$index)"
                >
                  <el-option
                    v-for="item in matchTeamsList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <img :src="scope.row.firstTenLogo" width="63" height="91" />
              </template>
            </el-table-column>
            <el-table-column
              prop="roundTwoHgWinId"
              label="获胜队伍"
              align="center"
            >
              <template #default="scope">
                <el-select
                  v-model="scope.row.roundTwoHgWinId"
                  filterable
                  placeholder="获胜队伍"
                  clearable
                  :style="{ width: '100%' }"
                  @change="changeTeamMap2($event, scope.row, scope.$index)"
                >
                  <el-option
                    v-for="item in matchTeamsList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <img
                  :src="scope.row.roundTwoHgWinLogo"
                  width="63"
                  height="91"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="roundTwoHgWinId"
              label="比赛状态"
              align="center"
            >
              <template #default="scope">
                <el-select
                  v-model="scope.row.matchStatus"
                  placeholder="比赛状态"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in matchStatusData"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button
          type="primary"
          v-if="type === 'edit'"
          @click="dataFormSubmitMapAll()"
          >确定</el-button
        >
        <el-button type="primary" v-else @click="dataFormSubmit()"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { request } from "@/utils/axios-util";
import {
  matchStatusData,
  matchTagData,
  roundsData,
  teamColorData,
} from "./config";
import Map from "./components/map.vue";

export default {
  components: {
    Map,
  },
  data() {
    return {
      visible: false,
      matchStatusData,
      matchTagData,
      roundsData,
      teamColorData,
      dataForm: {
        tenantName: "",
        leagueCode: "",
        enableFlag: 0,
        liveFlag: "N",
      },
      dataRule: {
        leftTeamId: [
          { required: true, message: "左边队伍不能为空", trigger: "change" },
        ],
        rightTeamId: [
          { required: true, message: "右边队伍不能为空", trigger: "change" },
        ],
        matchStatus: [
          { required: true, message: "比赛状态不能为空", trigger: "change" },
        ],
        matchTag: [
          { required: true, message: "比赛类型不能为空", trigger: "change" },
        ],
        matchDate: [
          { required: true, message: "比赛日期不能为空", trigger: "change" },
        ],
        matchTime: [
          { required: true, message: "比赛时间不能为空", trigger: "change" },
        ],
        enableFlag: [
          { required: true, message: "是否发布不能为空", trigger: "change" },
        ],
        liveFlag: [
          {
            required: true,
            message: "是否开启直播不能为空",
            trigger: "change",
          },
        ],
      },
      id: "",
      teamList: [],
      matchTeamsList: [],
      mapList: [],
      tenantNameInit: "乌拉圭胜利交锋",
      leagueCodeInit: "VC2024S01",
      tenantIdInit: 5,
      type: "",
    };
  },
  mounted() {
    this.getTeamList();
  },
  methods: {
    init(id) {
      this.id = id;
      if (id) {
        this.type = "edit";
        request("/admin/match/get", { id }, "GET").then(
          (res) => {
            if (res.code === 200) {
              this.dataForm = res.data;
              this.dataForm.tenantName = this.tenantNameInit;
              this.dataForm.tenantId = this.tenantIdInit;

              this.dataForm.matchInfoList.forEach((e, index) => {
                this.getLogo(e, index);
                console.log("first", this.dataForm.matchInfoList);
              });
            } else {
              this.$message.error(res.message);
            }
          },
          (resp) => {
            this.$message.error("数据获取失败，", resp);
          }
        );
        this.getMatchTeamsList();
      } else {
        this.type = "add";
        this.dataForm = {
          tenantName: "",
          leagueCode: "",
          enableFlag: 0,
          liveFlag: "N",
        };
        this.dataForm.leagueCode = this.leagueCodeInit;
        this.dataForm.tenantName = this.tenantNameInit;
        this.dataForm.tenantId = this.tenantIdInit;
      }
      this.visible = true;
    },
    changeTeam(e, type) {
      let obj = { name: "", logoUrl: "" };
      if (e) {
        obj = this.teamList.find((item) => item.id == e);
      }

      this.dataForm = {
        ...this.dataForm,
        [`${type}TeamName`]: obj.name,
        [`${type}TeamLogo`]: obj.logoUrl,
      };
    },
    changeRounds(e) {
      let num = 0;
      let list = [];
      if (e) {
        num = Number(e.substring(e.length - 1));
      }
      for (let index = 0; index < num; index++) {
        list.push({
          matchId: "",
          leagueMatchId: this.id,
          leagueCode: this.dataForm.leagueCode,
          matchStatus: this.dataForm.matchStatus,
          matchSort: index + 1,
          leftTeamId: this.dataForm.leftTeamId,
          rightTeamId: this.dataForm.rightTeamId,
        });
      }
      this.dataForm.matchInfoList = [...list];
    },
    changeMatchTag(e) {
      let str = "";
      if (e === "GROUP STAGE") {
        str = "BO1";
      } else {
        str = "BO3";
      }
      this.dataForm = {
        ...this.dataForm,
        rounds: str,
      };
    },
    getLogo(row, index) {
      let obj1 = { name: "", logoUrl: "" };
      let obj2 = { name: "", logoUrl: "" };
      let obj3 = { name: "", logoUrl: "" };
      let obj4 = { name: "", logoUrl: "" };
      let obj5 = { name: "", logoUrl: "" };
      if (row.roundOneHgWinId) {
        obj1 = this.teamList.find((item) => item.id == row.roundOneHgWinId);
      }
      if (row.roundTwoHgWinId) {
        obj2 = this.teamList.find((item) => item.id == row.roundTwoHgWinId);
      }
      if (row.firstFive) {
        obj3 = this.teamList.find((item) => item.id == row.firstFive);
      }
      if (row.firstTen) {
        obj4 = this.teamList.find((item) => item.id == row.firstTen);
      }
      if (row.firstDragon) {
        obj5 = this.teamList.find((item) => item.id == row.firstDragon);
      }

      this.dataForm.matchInfoList[index] = {
        ...row,
        roundOneHgWinLogo: obj1.logoUrl,
        roundTwoHgWinLogo: obj2.logoUrl,
        firstFiveLogo: obj3.logoUrl,
        firstTenLogo: obj4.logoUrl,
        firstDragonLogo: obj5.logoUrl,
      };
      this.dataForm.matchInfoList = [...this.dataForm.matchInfoList];
    },

    changeTeamMap3(e, row, index) {
      let obj = { name: "", logoUrl: "" };
      if (e) {
        obj = this.teamList.find((item) => item.id == e);
      }
      this.dataForm.matchInfoList[index] = {
        ...row,
        firstFive: obj.id,
        firstFiveLogo: obj.logoUrl,
      };
      this.dataForm.matchInfoList = [...this.dataForm.matchInfoList];
    },
    changeTeamMap4(e, row, index) {
      let obj = { name: "", logoUrl: "" };
      if (e) {
        obj = this.teamList.find((item) => item.id == e);
      }
      this.dataForm.matchInfoList[index] = {
        ...row,
        firstTen: obj.id,
        firstTenLogo: obj.logoUrl,
      };
      this.dataForm.matchInfoList = [...this.dataForm.matchInfoList];
    },

    changeTeamMap5(e, row, index) {
      let obj = { name: "", logoUrl: "" };
      if (e) {
        obj = this.teamList.find((item) => item.id == e);
      }
      this.dataForm.matchInfoList[index] = {
        ...row,
        firstDragon: obj.id,
        firstDragonLogo: obj.logoUrl,
      };
      this.dataForm.matchInfoList = [...this.dataForm.matchInfoList];
    },
    changeTeamMap1(e, row, index) {
      let obj = { name: "", logoUrl: "" };
      if (e) {
        obj = this.teamList.find((item) => item.id == e);
      }
      this.dataForm.matchInfoList[index] = {
        ...row,
        roundOneHgWinId: obj.id,
        roundOneHgWinLogo: obj.logoUrl,
      };
      this.dataForm.matchInfoList = [...this.dataForm.matchInfoList];
    },
    changeTeamMap2(e, row, index) {
      let obj = { name: "", logoUrl: "" };
      if (e) {
        obj = this.teamList.find((item) => item.id == e);
      }
      this.dataForm.matchInfoList[index] = {
        ...row,
        roundTwoHgWinId: obj.id,
        roundTwoHgWinLogo: obj.logoUrl,
      };
      this.dataForm.matchInfoList = [...this.dataForm.matchInfoList];
    },
    changeTeamColor(e, type, row, index) {
      let obj = { code: "", name: "" };
      if (e) {
        obj = this.teamColorData.find((item) => item.code !== e);
      }
      this.dataForm.matchInfoList[index] = {
        ...row,
        [`${type}TeamType`]: obj.code,
      };
      this.dataForm.matchInfoList = [...this.dataForm.matchInfoList];
    },

    // 获取队伍信息
    getTeamList() {
      request(
        "/portal/leagueInfo/teamInfo?leagueCode=" + this.leagueCodeInit,
        {},
        "GET"
      ).then(
        (res) => {
          if (res.code === 200) {
            this.teamList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (resp) => {
          this.$message.error("数据获取失败，", resp);
        }
      );
    },
    // 获取参赛队伍信息
    getMatchTeamsList() {
      request("/admin/match/getMatchTeams?id=" + this.id, {}, "GET").then(
        (res) => {
          if (res.code === 200) {
            this.matchTeamsList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (resp) => {
          this.$message.error("数据获取失败，", resp);
        }
      );
    },
    // 更新基础数据
    dataFormSubmit(type) {
      const data = {
        ...this.dataForm,
        historyFlag: 0,
      };
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          request("/admin/match/saveMatchInfo/lol", data, "POST").then(
            (res) => {
              if (res.code === 200) {
                this.$message.success("操作成功");
                if (!this.id || type === "all") {
                  this.visible = false;
                  $emit(this, "refreshDataList");
                }
              } else {
                this.$message.error(res.msg);
              }
            },
            (resp) => {
              this.$message.error("操作失败，", resp);
            }
          );
        }
      });
    },
    dataFormSubmitMapAll() {
      this.dataFormSubmit("all");
    },
  },
  emits: ["refreshDataList"],
};
</script>

<style scoped type="text/sass">
::v-deep .el-input-group__append {
  padding: 0px;
}
</style>
